<template>
  <div class="box">
    <div class="top clearfix">
      <span class="title">我的渔具</span>
      <el-button type="primary" @click="handleAdd" class="add">添加渔具</el-button>
    </div>
    <div class="table">
      <el-table
    :data="gearInfo"
    style="width: 100%">
    <el-table-column
      prop="gearname"
      label="品牌"
      width="100">
    </el-table-column>
    <el-table-column
      prop="geartype"
      label="类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="buytime"
      label="购买时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="description"
      label="备注"
      width="350">
    </el-table-column>
    <el-table-column
      label="操作"
      fixed="right"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handleUpdate(scope.row.gearid)">修改</el-button>
        <!-- <el-button type="text" size="small" @click="handleDelete(scope.row.gearid)">删除</el-button> -->
        <el-button type="text" size="small" @click="open(scope.row.gearid)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>

    <div class="mask" v-show="isShowAdd">
      <AddGear/>
    </div>
    <div class="mask" v-if="isShowUpdate">
      <UpdateGear :gearinfo="selectedGearInfo"/>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations ,mapActions} from 'vuex';
import {GetGearInfo,DeleteGearInfo} from '../../../request/api'
import AddGear from '../../../components/addgear.vue'
import UpdateGear from '../../../components/updategear.vue'
export default {
  data(){
    return{
      selectedGearId:null,
      selectedGearInfo:null,
    }
  },
  components:{
    AddGear,UpdateGear
  },
  computed:{
    ...mapState({
      gearInfo:state=>state.gearStatus.gearInfo,
      isShowAdd:state=>state.gearStatus.isShowAdd,
      isShowUpdate:state=>state.gearStatus.isShowUpdate
    })
  },
  methods:{
    ...mapMutations({
      setGearInfo:'gearStatus/setGearInfo',
      setIsShowAdd:'gearStatus/setIsShowAdd',
      setIsShowUpdate:'gearStatus/setIsShowUpdate'
    }),
    ...mapActions({
      asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
    }),
    handleAdd(){
      this.setIsShowAdd(true)
    },
    async handleDelete(gearid){
      let res = await DeleteGearInfo(gearid)
      if(res.data.state == 200){
        // 删除成功
        // this.gearInfo.splice(this.gearInfo.findIndex(item=>item.gearid == gearid),1)
        this.setGearInfo(this.gearInfo.filter(item=>item.gearid != gearid))
        this.asyncChangeIsShowToast({
          msg:'删除成功',
          type:'success'
        })
        this.$router.push('/other/gear')
      }
    },
    handleUpdate(gearid){
      // 修改操作
      // 显示form
      this.selectedGearId = gearid
      this.gearInfo.forEach(item=>{
        if(item.gearid == gearid){
          this.selectedGearInfo = item
        }
      })
      this.setIsShowUpdate(true)
    },
    open(gearid) {
        this.$confirm('确定删除该条数据吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(gearid)
        }).catch(() => {
          this.asyncChangeIsShowToast({
           msg:'已取消',
           type:'success' 
          })
        });
      }
  },
  async created(){
    let res = await GetGearInfo()
    if(res.data.state == 200){
      // 保存gear数据
      this.setGearInfo(res.data.data)
    }
  }
}
</script>

<style scoped>
.title{
  margin-bottom: 20px;
  font-size: 20px;
  margin-left: 20px;
}
.add{
  float: right;
}
.mask{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
